<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
  <meta name="generator" content="Hugo 0.101.0">
  <title>软约管理系统-修改密码</title>

  <!-- Bootstrap core CSS -->
  <link href="./PwYeMian/bootstrap-4.6.2/css/bootstrap.min.css" rel="stylesheet">
  <link href="./PwYeMian/element/index.css" rel="stylesheet">

  <style>
    .bd-placeholder-img {
      font-size: 1.125rem;
      text-anchor: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    @media (min-width: 768px) {
      .bd-placeholder-img-lg {
        font-size: 3.5rem;
      }
    }
  </style>

  <!-- Custom styles for this template -->
  <link href="./PwYeMian/assets/css/changePassword.css" rel="stylesheet">
</head>
<body>
<div id="app" class="form-change-password" style="margin: 1em auto;max-width: 400px">
  <div class="text-center mb-4">
    <img class="mb-4" src="./PwYeMian/assets/images/logo.png" alt="" width="72" height="72">
    <h1 class="h3 mb-3 font-weight-normal">创体软约管理系统</h1>
  </div>

  <div class="form-label-group" >
    <label for="inputOldPassword">旧密码</label>
    <input type="password" id="inputOldPassword" class="form-control" placeholder="请输入旧密码"
           v-model="tempOldPassword" required @keyup.enter="changePassword">

  </div>

  <div class="form-label-group">
    <label for="inputNewPassword">新密码</label>
    <input type="password" id="inputNewPassword" class="form-control" placeholder="请输入新密码"
           v-model="tempNewPassword" required @keyup.enter="changePassword">

  </div>

  <div class="form-label-group">
    <label for="inputConfirmPassword">确认新密码</label>
    <input type="password" id="inputConfirmPassword" class="form-control" placeholder="请确认新密码"
           v-model="tempConfirmPassword" required @keyup.enter="changePassword">

  </div>
<br>
  <button class="btn btn-lg btn-primary btn-block" @click="changePassword">{{changePasswordText}}</button>
  <p class="mt-5 mb-3 text-muted text-center">&copy; 双体软件精英产业学院-磐创四部</p>
</div>
</body>
</html>
<script src="./PwYeMian/vue/vue-2.7.6.min.js"></script>
<script src="./PwYeMian/vue/axios.min.js"></script>
<script src="./PwYeMian/element/index.js"></script>
<script src="./PwYeMian/assets/js/constants.js"></script>
<script>
  let http = axios.create({
    baseURL: baseURL,
    timeout: 5000
  });

  let app = new Vue({
    el: "#app",
    data: {
      tempOldPassword: "",
      tempNewPassword: "",
      tempConfirmPassword: "",
      changePasswordText: "修改密码",
      changing: false
    },
    methods: {
      async changePassword() {
        this.changing = true;
        this.changePasswordText = "修改中";
        if (this.tempOldPassword === undefined || this.tempOldPassword === null || this.tempOldPassword === "") {
          this.$message({
            message: '请输入旧密码',
            type: 'error'
          });
          this.changing = false;
          this.changePasswordText = "修改密码";
          return false;
        }
        if (this.tempNewPassword === undefined || this.tempNewPassword === null || this.tempNewPassword === "") {
          this.$message({
            message: '请输入新密码',
            type: 'error'
          });
          this.changing = false;
          this.changePasswordText = "修改密码";
          return false;
        }
        if (this.tempConfirmPassword === undefined || this.tempConfirmPassword === null || this.tempConfirmPassword === "") {
          this.$message({
            message: '请确认新密码',
            type: 'error'
          });
          this.changing = false;
          this.changePasswordText = "修改密码";
          return false;
        }
        if (this.tempNewPassword.length < 8 || this.tempNewPassword.length > 12) {
          this.$message({
            message: '新密码长度应为 8-12 位',
            type: 'error'
          });
          this.changing = false;
          this.changePasswordText = "修改密码";
          return false;
        }
        if (this.tempNewPassword!== this.tempConfirmPassword) {
          this.$message({
            message: '新密码和确认密码不一致',
            type: 'error'
          });
          this.changing = false;
          this.changePasswordText = "修改密码";
          return false;
        }
        let postData = {
          account: JSON.parse(localStorage.getItem("rememberedUser")).ac,
          oldPassword: btoa(this.tempOldPassword),
          newPassword: btoa(this.tempNewPassword)
        };
        try {
          let res = await http.post('/judge/changePassword', postData);
          console.log("change password result: ", res.data);
          if (res.data.code === 1) {
            this.$message({
              message: '密码修改成功',
              type: 'success'
            });
            // 密码修改成功后的操作，例如跳转回登录页面或其他页面
            location.href = "/login.html";
          } else {
            this.$message({
              message: '密码修改失败，请检查旧密码是否正确',
              type: 'error'
            });
          }
        } catch (error) {
          this.$message({
            message: '密码修改失败，请稍后重试',
            type: 'error'
          });
        } finally {
          this.changing = false;
          this.changePasswordText = "修改密码";
        }
      }
    }
  });
</script>